<style scoped lang="less">
  @import "./index.less";
</style>

<template>
  <ul class="m-nav-list">
    <li v-for="(item, index) in list" :key="index">
      <a :href="item.href" target="_blank" rel="noopener noreferrer" class="u-scale" v-if="item.href">
        <img :src="item.url" :title="item.text" :alt="item.text" />
      </a>
      <router-link :to="{ name: item.name }" v-else>{{ item.text }}</router-link>
    </li>
  </ul>
</template>

<script lang="ts">
  import { defineComponent, PropType } from "vue";
  import { ListItem } from "./interfaces";

  export default defineComponent({
    name: "NavList",
    props: {
      list: {
        type: Array as PropType<ListItem[]>,
        required: true
      }
    },
    setup() {
      return {};
    }
  });
</script>
